window.onload = function() {
    init();
}

function init() {
    console.log(initMenu);
    initMenu();
}
var initMenu = (function() {
    var oMenu = document.getElementsByClassName('menu-wrap')[0],
        oMenuItems = oMenu.getElementsByClassName('main-item'),
        oSub = oMenu.getElementsByClassName('sub')[0],
        oSubItems = oSub.getElementsByClassName('sub-item'),
        menuLen = oMenuItems.length,
        menuItem,
        subLen = oSubItems.length,
        subItem,
        isInSub = false,
        isFirst = true,
        t = null,
        mousePoses = [];
    addEvent(oMenu, 'mouseenter', function() {
        addEvent(document, 'mousemove', moveMove)
    })
    addEvent(oMenu, 'mouseleave', menuMouseOut)
    for (var i = 0; i < menuLen; i++) {
        menuItem = oMenuItems[i];
        addEvent(menuItem, 'mouseenter', menuItemMouseEnter);
    }

    addEvent(oSub, 'mouseenter', function() {
        isInSub = true;
    })
    addEvent(oSub, 'mouseleave', function() {
        isInSub = false;
    })

    function menuItemMouseEnter(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            thisIdex = Array.prototype.indexOf.call(oMenuItems, tar),
            lastPos = mousePoses[mousePoses.length - 2] || {
                x: 0,
                y: 0
            },
            curPos = mousePoses[mousePoses.length - 1] || {
                x: 0,
                y: 0
            },
            toDelay = doTimeout(lastPos, curPos);
        oSub.className = 'sub'
        if (t) {
            clearTimeout(t);
        }
        console.log(1123);
        console.log(isFirst);
        console.log(toDelay);
        if (!isFirst) {
            if (toDelay) {
                t = setTimeout(() => {
                    if (isInSub) {
                        return
                    }
                    addActive(thisIdex)
                    t = null;
                }, 300);
            } else {
                addActive(thisIdex)
            }
        } else {
            addActive(thisIdex);
            isFirst = false
        }
    }

    function addActive(index) {
        removeAllActive()
        oMenuItems[index].className += ' active'
        oSubItems[index].className += ' active'
    }

    function removeAllActive() {
        for (var i = 0; i < menuLen; i++) {
            menuItem = oMenuItems[i];
            menuItem.className = 'main-item';
        }
        for (var i = 0; i < subLen; i++) {
            subItem = oSubItems[i];
            subItem.className = 'sub-item';
        }
    }

    function menuMouseOut() {
        oSub.className += ' hide';
        removeAllActive();
        removeEvent(document, 'mousemove', moveMove)
    }
    //获得鼠标移动的三个点
    function moveMove(e) {
        var e = e || window.event;
        mousePoses.push({
            x: pagePos(e).x,
            y: pagePos(e).y
        })
        if (mousePoses.length > 3) {
            mousePoses.shift();
        }
    }

    function doTimeout(lastPos, curPos) {
        var topLeft = {
                x: getStyle(oMenu, 'width') + getStyle(oMenu, 'margin-left'),
                y: getStyle(oMenu, 'margin-top')
            },
            bottomLeft = {
                x: getStyle(oMenu, 'width') + getStyle(oMenu, 'margin-left'),
                y: getStyle(oMenu, 'margin-top') + getStyle(oSub, 'height')
            }
        console.log(mousePoses);
        console.log(curPos);
        return pointInTriangle(curPos, lastPos, topLeft, bottomLeft)
    }
});